<template>
	<view class="input_class">
		<view class="name_class">
			<span class="name">姓名<span class="start">*</span></span>
			<input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入姓名"
				v-model="userInfo.name">
		</view>
		<view class="name_class">
			<span class="name">电话号<span class="start">*</span></span>
			<input :placeholder-style="inputPlaceHolderStyle" type="text" placeholder="请输入电话号码" v-model="userInfo.tel">
		</view>
		<view class="name_class">
			<span class="name">营业执照名称<span class="start">*</span></span>
			<input :placeholder-style="inputPlaceHolderStyle" type="text" placeholder="请输入营业执照"
				v-model="userInfo.businessName">
		</view>
		<view class="name_class">
			<span class="name">营业地址<span class="start">*</span></span>
			<view style="position: relative;" @click="getAddress">
				<input :placeholder-style="inputPlaceHolderStyle" class="input-address" type="text"
					placeholder="请选择营业地址" v-model="userInfo.address" disabled>
				<image class="left" src="https://jiechendy.sdshengyue.cn/uploads/8a/206fe6237202dec13798180795aeb1.png">
				</image>
			</view>
		</view>
	</view>
<!-- 	<view class="center">
		<view class="card-text">
			请拍摄并上传您的有效身份证
		</view>
		<view class="card-img">
			<view class="card-img2" @click="openUpload(0)">
				<image class="img" src="https://jiechendy.sdshengyue.cn/uploads/ca/60a2b795655ed6b4c1ef3d404fec21.png"
					v-if="userInfo.frontCard==''"></image>
				<image class="img" :src="userInfo.frontCard" v-else></image>
				<view class="card-text2">
					拍摄身份证正面
				</view>
			</view>
			<view class="card-img2" @click="zphotoFn(1)">
				<image class="img" src="https://jiechendy.sdshengyue.cn/uploads/fe/62257dff3f6a59a60e7ef4bf8f19ca.png"
					v-if="userInfo.lastCard==''"></image>
				<image class="img" :src="userInfo.lastCard" v-else></image>
				<view class="card-text2">
					拍摄身份证背面
				</view>
			</view>
		</view>

	</view> -->
	<view class="center">
		<view class="card-text">
			请拍摄并上传您的营业执照
		</view>
		<view class="card-img">
			<view class="card-img2" @click="openUpload()">
				<image class="img" src="https://jiechendy.sdshengyue.cn/uploads/ca/60a2b795655ed6b4c1ef3d404fec21.png"
					v-if="userInfo.businessNameCard==''"></image>
				<image class="img" :src="userInfo.businessNameCard" v-else></image>
				<view class="card-text2">
					上传营业执照照片
				</view>
			</view>
		</view>
	</view>
<!-- 	<view class="bitton" @click="emitFn">
		提交
	</view> -->
	<view class="bitton">
			提交
		</view>
	<view class="bottom">

	</view>
	<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
</template>
<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				isUpload: false,
				inputPlaceHolderStyle: "color:#AAAAAA",
				userInfo: {
					name: '',
					tel: null,
					businessName: '',
					address: '',
					frontCard: '',
					lastCard: '',
					businessNameCard: ''
				}
			};
		},
		methods: {

			/*打开上传图片*/
			openUpload() {
				this.isUpload = false;
				this.isUpload = true;
			},

			/*获取上传的图片*/
			getImgsFunc(e) {
				console.log('e',e);
				let self = this;
				self.userInfo.businessNameCard = e[0].file_path
				// if (e && typeof e != 'undefined') {
				// 	let index = self.index;
				// 	self.tableData[index].image_list = self.tableData[index].image_list.concat(e);
				// 	console.log('self.tableData[index].image_list',self.tableData[index].image_list);
				// }
				self.isUpload = false;
			},
			getAddress() {
				console.log(111111111);
				uni.chooseLocation({
					success: (res) => {
						this.userInfo.address = res.address
					}
				});
			},
			emitFn() {
				let self = this
				if (self.userInfo.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: "none",
					});
					return false
				} 
				 if (self.userInfo.tel == null) {
					uni.showToast({
						title: '请输入电话号',
						icon: "none",
					});
					return false
				} 
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				 if (!reg.test(self.userInfo.tel)) {
					// var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					
						uni.showToast({
							title: '手机格式错误',
							icon: "none",
						});
						return false;

				}
				 if (self.userInfo.businessName == '') {
					uni.showToast({
						title: '请输入营业执照名称',
						icon: "none",
					});
					return false
				} 
				 if (self.userInfo.address == '') {
					uni.showToast({
						title: '请选择地址',
						icon: "none",
					});
					return false
				} 
				 if ( self.userInfo.businessNameCard == '') {
					uni.showToast({
						title: '请上传照片',
						icon: "none",
					});
					return false
				} 
				
					console.log(11111111111111);
					self._post('user.Yingye/add', {
						name: self.userInfo.name,
						mobile: self.userInfo.tel,
						shopcard: self.userInfo.businessName,
						address: self.userInfo.address,
						shopimg: self.userInfo.businessNameCard
					}, function(res) {
						self.showSuccess('提交成功', function() {
							uni.reLaunch({
								url: '/pages/user/index/index'
							})
						});

					});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-address {
		margin-right: 40rpx;
	}

	.start {
		color: red;
	}

	.left {
		position: absolute;
		right: 0;
		width: 30rpx;
		height: 27rpx;
		top: 12rpx;
	}



	.input_class {
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
	}

	.name_class {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name {
		padding-top: 5rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	input {
		// color: #cccccc;
		width: 378rpx;
		text-align: right;
		height: 34rpx;
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// opacity: 1;
		width: 378rpx;
		height: 34rpx;
		font-size: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;


	}

	input::placeholder {
		color: red !important;
	}

	.placeholder {
		color: #AAAAAA;
	}

	.center {
		margin-top: 30rpx;
		width: 690rpx;
		height: 344rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin-left: 30rpx;
	}

	.card-text {
		width: 388rpx;
		height: 48rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 223rpx;
		height: 147rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: 14rpx 44rpx 12rpx 46rpx;
	}

	.card-img {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.card-img2 {
		width: 314rpx;
		height: 228rpx;
		background: #F6F6F6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
	}

	.card-text2 {
		width: 314rpx;
		height: 56rpx;
		background: #2568BC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.bitton {
		margin-top: 60rpx;
		width: 690rpx;
		height: 88rpx;
		background: #2568BC;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		opacity: 1;
		border-radius: 72rpx;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.bottom {
		height: 122rpx;
	}
</style>